<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>pie</title>
    <!-- <script src="https://d3js.org/d3.v5.min.js"></script> -->
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>

    <svg width="960" height="960"></svg>

</body>

<script>

    var leixing = ["喜剧", "剧情", "动作", "冒险", "爱情", "惊悚", "动画", "奇幻", "悬疑", "科幻"]; //定义类型标签
    var matrix = [
        [77, 108, 88, 110, 245, 12, 110, 50, 25, 17],
        [108, 102, 117, 37, 180, 67, 13, 27, 79, 20],
        [88, 117, 9, 133, 54, 103, 22, 59, 43, 96],
        [110, 37, 133, 3, 21, 32, 141, 98, 16, 60],
        [245, 180, 54, 21, 59, 15, 3, 33, 33, 7],
        [12, 67, 103, 32, 15, 18, 1, 13, 111, 33],
        [110, 13, 22, 141, 3, 1, 12, 60, 5, 12],
        [50, 27, 59, 98, 33, 13, 60, 0, 5, 13],
        [25, 79, 43, 16, 33, 111, 5, 5, 1, 12],
        [17, 20, 96, 60, 7, 33, 12, 13, 12, 0],
    ];//输入类型相关性数据

    var svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height"),
        outerRadius = Math.min(width, height) * 0.5 - 40,
        innerRadius = outerRadius - 40; //定义外部弦和内部弦的大小

    // 绘制外部弦
    var chord = d3.chord()
        .padAngle(0.05) //设置外部弦间的角填充,也就是弦之间的间距
        .sortSubgroups(d3.descending); //设置用于子分组的比较器
    var arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius);
    var ribbon = d3.ribbon().radius(innerRadius);
    var color = d3.scaleOrdinal().domain(d3.range(4)).range(["#8EC21E", "#8EC21E", "#8EC21E", "#8EC21E", "#8EC21E", "#8EC21E", "#8EC21E", "#8EC21E", "#8EC21E", "#8EC21E",'#8EC21E','#8EC21E','#8EC21E','#8EC21E']);
    // 设置颜色（和元素标签数量相等即可，在本例中为10）
    var g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")").datum(chord(matrix));
    var group = g.append("g").attr("class", "groups").selectAll("g").data(function (chords) { return chords.groups; }).enter().append("g");

    group.append("path").style("fill", function (d) { return color(d.index); }).attr("d", arc);

    // group.append("text")
    //     .each(function (d, i) { d.angle = (d.startAngle + d.endAngle) / 2; d.name = leixing[i]; })
    //     .attr("dy", ".35em")
    //     .attr("transform", function (d) {
    //         return "rotate(" + (d.angle * 180 / Math.PI) + ")" + "translate(0," + -1.0 * (outerRadius + 10) + ")" + ((d.angle > Math.PI * 3 / 4 && d.angle < Math.PI * 5 / 4) ? "rotate(180)" : "");
    //     })
    //     .text(function (d) { return d.name; });


    // var groupTick = group.selectAll(".group-tick")
    //     .data(function (d) { return groupTicks(d, 1e3); })
    //     .enter().append("g")
    //     .attr("class", "group-tick")
    //     .attr("transform", function (d) { return "rotate(" + (d.angle * 180 / Math.PI - 90) + ") translate(" + outerRadius + ",0)"; });

    // g.append("g")
    //     .attr("class", "ribbons")
    //     .selectAll("path")
    //     .data(function (chords) { return chords; })
    //     .enter().append("path")
    //     .attr("d", ribbon)
    //     .style("fill", function (d) { return color(d.target.index); })

    // function groupTicks(d, step) {
    //     var k = (d.endAngle - d.startAngle) / d.value;
    //     return d3.range(0, d.value, step).map(function (value) {
    //         return { value: value, angle: value * k + d.startAngle };
    //     });
    // }

</script>

</html>